﻿<html style="font-size:41.4px">
<head>
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
<style type="text/css">
body { margin:0; }
/* 设置网页左上角头像样式 */
.avatar_small { 
	position:absolute;			/* 设置定位方式 */
	z-index:2;
	left:0; top:0;				/* 设置位置 */
	width:1rem; height:1rem;	/* 设置大小 */
}
/* 设置滑出菜单时网页遮罩的样式 */
.mask { 
	display:none;				/* 默认隐藏 */
	position:fixed;				/* 设置定位方式 */
	z-index:10;
	left:0;top:0;				/* 设置位置 */
	width:100%; height:100%;	/* 设置大小 */
	background-color:rgba(0,0,0,0.1);	/* 设置背景色和透明度 */
}
/* 设置侧边栏样式 */
.nav { 
	position:absolute;			/* 设置定位方式 */
	z-index:11;
	left:-5rem; top:0;			/* 设置初始位置 */
	width:5rem; height:100%;	/* 设置大小 */
	background-color:#555;		/* 设置背景色 */
}
/* 设置侧边栏滑出效果 */
.nav { 
	transition:left linear 0.3s;	/* 设置过渡函数和时间 */
}
/* 清除UL和LI的默认样式 */
.nav ul, .nav li { 
	list-style:none; 
	padding:0; 
	margin:0; 
}
/* 设置侧边栏超链接样式 */
.nav a { 
	display:block; 
	padding:1em 0; 
	border-bottom:1px solid #888; 
	font-size:16px; 
	color:#eee; 
	text-align:center; 
}
.nav .avatar_big { width:3rem; }
</style>
</head>
<body>
<!-- 定义网页主体内容的容器 -->
<div class="body">
	<!-- 定义左上角用户头像 -->
	<a class="avatar_small"></a>
	<!-- 网页主体内容 -->
	<img src="assets/body.png" style="width:10rem;" />
</div>
<!-- 定义网页遮罩 -->
<div class="mask"></div>
<!-- 定义侧边栏容器 -->
<div class="nav">
	<ul>
		<li><a><img class="avatar_big" src="assets/guest.png" /></a></li>
		<li><a>我的课程</a></li>
		<li><a>我的订单</a></li>
		<li><a>我的收藏</a></li>
		<li><a>个人中心</a></li>
	</ul>
</div>
	<script type="text/javascript">
// 分别获取元素：用户头像、遮罩和侧边栏
var btn = document.querySelector('.avatar_small'),
	mask = document.querySelector('.mask'),
	nav = document.querySelector('.nav');
// 给用户头像添加点击事件
btn.addEventListener('click', function () { 
	// 展示遮罩
	mask.style.display = 'block';
	// 滑出侧边栏
	nav.style.left = '0';
}, false);
// 给遮罩添加点击事件
mask.addEventListener('click', function () { 
	// 隐藏遮罩
	mask.style.display = 'none';
	// 隐藏侧边栏
	nav.style.left = '-5rem';
}, false);
	</script>
</body>
</html>